<template>
    <div v-loading.fullscreen.lock="loading">
        <div>
            <img style="width: 100%;"  src="@/assets/img/edutop.jpg"/>
        </div>
         <div class="container">
            <div class="container1">
                <!-- <div class="header1"> -->
                    <div class="header2">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="brief">师资队伍</el-breadcrumb-item>
                        <el-breadcrumb-item>教师名录</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                <!-- 卡片视图 -->
                    <el-card class="card a">                     
                            <span class="teacher1" v-for="(item,index) in teacher" :key="index" @click="teacher_detail(item.id)">
                                <i class="el-icon-user-solid"></i>  
                                {{item.name}}
                            </span>      
                    </el-card>    
               
            </div>
            
        </div>
    </div>
</template>

<script>
import '@/assets/js/index.js'
import {teacher} from '@/api/apis.js'
export default {
    data(){
        return{
            teacher:[],
            val:false,
            loading:true
        }
    },
    created(){
        this.teacher1()
    },
    methods:{
        async teacher1(){
           const {data:res}=await teacher()
        //    console.log(res) 
           this.teacher=res.data
           this.loading=false
        //    this.$emit('getstate',true)
        },
        teacher_detail(id){
            // console.log(id)
            this.$router.push({
                path:'/teacher_detail',
                query:{
                    id
                }
                
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
    font-size: .25rem;
}
.container{  
    font-size: 16px;    
    
    .container1{
        
        .header2{
            width: 11.25rem;
            margin: 0 auto;
            padding: .15rem 0 .15rem .2rem;
        }
        .card{
            display: flex;
            flex-direction: row !important;
             width: 11.25rem;
            margin:0 auto;        
        }
        .teacher1{
            // font-size: 200px;
            cursor: pointer;
            display: inline-block;
            margin: .2rem .4rem .1rem .4rem;
        }
        .teacher1:hover{
            color:#ffc653;
            cursor: pointer;
        }
       
    }
}
</style>